<template>
    <h3>provide 和 inject </h3>
    <p1>inject1的值 {{injectVal1}}</p1>
    <br>
    <p1>inject2的值 {{injectVal2}}</p1>
</template>

<script>
  import {provide, inject} from 'vue'

  export default {
    name: "05.provide和inject",

    setup() {
      // inject 有两个参数,
      // 1. inject 的属性的名字
      // 2. 默认值, 可选参数

      // 为了增加 provide 和 inject 的值的响应性, 我们可以通过 ref 和 reactive 来定义一下
      const injectVal1 = inject('location', '默认值')
      const injectVal2 = inject('geolocation', '默认值')

      return {
        injectVal1,
        injectVal2
      }
    }

  }
</script>

<style scoped>

</style>
